<template>
	<view>
		<hx-navbar  :border="false" :fixed="true" transparent="hidden"
			 :pageScroll.sync="scrollData" height="140rpx">
			<view style="text-align: center;width: 100%;font-weight: 700;"><text>订单详情</text></view>
			
		</hx-navbar>
		
		<view style="background: linear-gradient(189.08deg, #DBF9F1 0%, rgba(219, 249, 241, 0) 36.82%), #FFFFFF;height:256rpx;width: 100%;position: absolute;top: 0;"></view>
		<view class="topheader">
			<view class="left">
				<view>单号<text>#{{order.info.id }}</text></view>
				<view class="predict">预计{{order.info.time}}送达</view>
			</view>
			<view class="right">
				<view>催单</view>
				<view @click="callKefu()">联系客服</view>
			</view>
		</view>
		<view class="main">
		<view class="b-r m-t container">
			<view class="store">
				<view class="name ">
					<text style="font-weight: bold;font-size: 35rpx;">{{ order.info.storeName }}</text>
				</view>
				<view class="goods-box">
					<block v-for="(goods, i) in order.shopping_cart" :key="i" v-if="order.shopping_cart">
						<view class="goods-item">
							<view class="left">
								<image :src="goods.pImg" mode="aspectFill"></image>
							</view>
							<view class="right">
								<view class="row1">
									<view class="tit">
										<!-- <text class="zk"
											v-if="goods.oldprice && Number(goods.price) < Number(goods.oldprice)">折</text> -->
										<text>{{ goods.pName }}</text>
									</view>
									<view class="tag">
										x
										<text>{{ goods.pNum }}</text>
									</view>
								</view>
								<view class="row2">
									<view class="old-price" v-if="goods.oldprice">
										<text class="fh">￥</text>
										<text class="lt">{{ goods.oldprice }}</text>
									</view>
									<view class="price">
										<text class="fh">￥</text>
										<text>{{ goods.pPrice }}</text>
									</view>
								</view >
								<!-- <view class="row2">
									<text>{{ goods.current_form ? goods.current_form.name : goods.descripe}}</text>
								</view> -->
								
							</view>
						</view>
					</block>
				</view>
				<view class="p-bb b-b"></view>
				<view class="flex-rl peisong">
					<view class="right"><text>打包费</text></view>
					<view class="left">
						<text class="fh">￥</text>
						<text>{{ order.info.packNum }}</text>
					</view>
				</view>
				<view class="p-bb b-b"></view>
				<view class="flex-rl peisong">
					<view class="right"><text>配送费</text></view>
					<view class="left">
						<text class="fh">￥</text>
						<text>1.0</text>
					</view>
				</view>

				
				<!-- <view class="flex-rl peisong">
					<view class="right"><text>下单时间</text></view>
					<view class="left">
						<text class="fh">￥</text>
						<text>{{ order.info.creatTime }}</text>
					</view>
				</view> -->
				<view class="p-bb b-b"></view>
				<view class="flex-rl totalbox">
					<view class="left">
						<text>合计支付</text>
						<!-- <i class="hxicon-question"></i> -->
					</view>
					<view class="right">
						<view class="total">
							<text class="fh">￥</text>
							<text class="num">{{ order.info.money }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="distribution common">
			<view class="titile">配送信息</view>
			<view class="p-bb b-b"></view>
			<view class="box">
				<view>收货地址</view>
				<view>{{ order.info.addressname }}{{order.info.area}}</view>
			</view>
			<view class="p-bb b-b"></view>
			<view class="box">
				<view>联系方式</view>
				<view>微信用户</view>
			</view>
			<view class="p-bb b-b"></view>
			<view class="box">
				<view>预计送达时间</view>
				<view>{{order.info.time}}</view>
			</view>
		</view>
		<view class="contact common">
			<view class="titile">联系我们</view>
			<view class="p-bb b-b"></view>
			<view class="box" @click="callStoreId(order.info.storeId)">
				<view>商家电话</view>
				<view>{{order.info.storeId}}</view>
			</view>
			<view class="p-bb b-b"></view>
			<view class="box">
				<view>配送站长</view>
				<view>查看二维码</view>
			</view>
			<view class="p-bb b-b"></view>
			<view class="box" @click="callKefu()">
				<view>客服微信</view>
				<view>查看二维码</view>
			</view>
		</view>
		<view class="information common">
			<view class="titile">订单信息</view>
			<view class="p-bb b-b"></view>
			<view class="box">
				<view>配送号</view>
				<view>#{{order.info.id }}</view>
			</view>
			<view class="p-bb b-b"></view>
			<view class="box">
				<view>支付方式</view>
				<view>在线支付</view>
			</view>
			<view class="p-bb b-b"></view>
			<view class="box">
				<view>支付时间</view>
				<view>{{order.info.creatTime}}</view>
			</view>
		</view>
		<view class="btn" v-if="order.info.oStatus==2" @click="pay()"><text>支付订单</text></view>
		<view class="btn" v-if="order.info.oStatus==3" @click="refund()"><text>退款申请</text></view>
		<view class="btn" v-if="order.info.oStatus==5" @click="commit()"><text>确认收货</text></view>
	<!-- 	<view class="b-r m-t container p12 other-box">
			<view class="flex-rl row">
				<view class="left"><text>餐具数量</text></view>
				<view class="right" >
					<text>{{ order.info.canshu }}人</text>
					<i class="hxicon-right"></i>
				</view>
			</view>
		</view>
		<view class="b-r m-t container p12 other-box">
			<view class="flex-rl row " style="font-size: 35rpx;">
				<view class="left"><text>备注</text></view>
				<view class="right">
					<text v-if="order.info.remark" >{{ order.info.remark }}</text>
					<text v-else >未填写备注信息</text>
					<i class="hxicon-right"></i>
				</view>
			</view>
		</view>
		<view class="b-r m-t container p12 other-box" @click="callKefu()">
			<view class="flex-rl row">
				<view class="left"><text>客服</text></view>
				<view class="right">
					<text >联系客服</text>
					<i class="hxicon-right"></i>
				</view>
			</view>
		</view>
		<view class="b-r m-t container p12 other-box" @click="callStoreId(order.info.storeId)">
			<view class="flex-rl row">
				<view class="left"><text>商家电话</text></view>
				<view class="right">
					<text >联系商家</text>
					<i class="hxicon-right"></i>
				</view>
			</view>
		</view>
		<view class="b-r m-t container p12 other-box">
			<view class="flex-rl row">
				<view class="left"><text>送达地址</text></view>
				<view class="right">
					<text >{{ order.info.addressname }}{{order.info.area}}</text>
					<i class="hxicon-right"></i>
				</view>
			</view>
		</view>
		
		<view class="body-end"></view>

		<view class="foot">
			<view class="left">
				<view class="price">
					<text class="fh">￥</text>
					<text class="txt">{{ order.info.money }}</text>
				</view>
				<view class="discount" v-if="totalYhPrice">
					<text>已优惠￥{{ totalYhPrice }}</text>
				</view>
			</view>
			<view class="right" v-if="order.info.oStatus==2" @click="pay()"><text>支付订单</text></view>
			<view class="right" v-if="order.info.oStatus==3" @click="refund()"><text>退款申请</text></view>
			<view class="right" v-if="order.info.oStatus==5" @click="commit()"><text>确认收货</text></view>
		</view> -->
	</view>
	</view>
</template>

<script>
	//数据库引入
	const db = uniCloud.database();
	//引入全局变量
	var app = getApp();
	export default {
		data() {
			return {
				ispass: "",
				packnum: 0, //打包费
				orderId: '',
				customStyle: {
					width: '150rpx',
					height: '50rpx',
					color: '#ffffff',
					background: 'linear-gradient(45deg, #0081ff, #1cbbb4)'
				},
				scrollData: {},
				//购物车缓存 Storage 名称
				shoppingCartStorageName: 'shopping_cart',
				//门店信息
				storeData: {},
				//购物车
				shoppCart: [],
				//头部选项卡 参数为 0不显示选项卡,1,2
				tabIndex: 1,
				//收获地址
				addressData: null,
				//手机隐私
				ysStatus: true,
				//结算价
				totalPrice: 0,
				//已优惠价
				totalYhPrice: 0,
				//商品数量
				totalNumber: 0,
				remark: '',
				place: "",
				// order:[]
				order:{
					info:{
						storeName:'湘府八大碗',
						id:'278636',
						packNum:'1',
						creatTime:'2023-01-12 15:28:27',
						money:'17.89',
						canshu:'2',
						remark:'多放辣',
						storeId:'11122223333',
						addressname:'升华公寓35栋',
						area:'401',
						oStatus:2,
						time:'19:00-19:30'
					},
					shopping_cart:[{pImg:'/static/order/loading.gif',pName:'辣椒炒肉',oldprice:'20.88',pPrice:'16.88',pNum:'1'},
					{pImg:'/static/order/loading.gif',pName:'辣椒炒肉',oldprice:'20.88',pPrice:'16.88',pNum:'1'},
					{pImg:'/static/order/loading.gif',pName:'辣椒炒肉',oldprice:'20.88',pPrice:'16.88',pNum:'1'}]
				}
			};
		},
		onLoad(option) {
			let that = this;
			this.orderId = option.orderId
			// this.orderId = "20220119221331379"
			//从后端请求数据
			uni.request({
				url:"https://zback.shixiaozhu.work/ShixiaozhuTest/order/getOrderDetail?orderId="+this.orderId,
				success(res) {
					that.order = res.data.data
					console.log('-------',that.order)
				}
			})
		},
		onPageScroll(e) {
			this.scrollData = e;
		},
		methods: {
			//去支付
			pay(){
				uni.navigateTo({
					url:"../pay?id="+this.orderId+"&store_id="+this.order.info.storeId+"&openid="+this.order.info.uopenid+"&expirationTime="+this.order.info.expirationTime+"&store_name="+this.order.info.storeName
				})
			},
			callStoreId(storeId){
				uni.showLoading({
					title:"正在获取联系方式..."
				})
				db.collection('storeList').where({
					'data.store_id':storeId
				}).get({getOne:true}).then((res)=>{
					uni.makePhoneCall({
						phoneNumber:res.result.data.data.telephone
					})
				})
			},
			callKefu(){
				//弹出食小助二维码大图，可以直接扫码
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = "../../../static/shixiaozhu_weixin.png"
				uni.previewImage({
				    current: 0,
				    urls: imgsArray
				});
			}
		}
	};
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.pop_box {
		width: 500rpx;
		height: auto;
	}

	.pop_btn_box {
		display: flex;
		justify-content: space-around;
	}

	.text-input {
		width: 100%;
		min-height: 250rpx;
		max-height: 600rpx;
		font-weight: 500;
		background-color: #999999;
	}

	.b-r {
		border-radius: 12rpx;
	}

	.m-t {
		margin-top: 12rpx;
	}

	.p-bb {
		margin: 18rpx 0;
		height: 1rpx;
		// background:  rgba(217, 217, 217, 1);
	}

	.flex-rl {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	// .container {
	// 	margin-left: 24rpx;
	// 	margin-right: 24rpx;
	// 	background-color: #ffffff;
	// }

	.p12 {
		padding: 24rpx;
	}

	.t-top-box {
		display: flex;
	}

	.head {
		background: linear-gradient(to bottom, #ffc107, #f1f1f1);

		padding-top: 40rpx;

		.tab-box {
			position: relative;
			height: 80rpx;
			margin: 0 24rpx;

			.item {
				position: absolute;
				top: 0;
				bottom: 0;
				height: 80rpx;
				text-align: center;
				font-size: 28rpx;

				width: 50%;

				.tit-box {
					position: relative;
					height: 72rpx;
					line-height: 72rpx;
					border-top-left-radius: 12rpx;
					border-top-right-radius: 12rpx;
					background-color: rgba(#ffffff, 0.6);
					width: 100%;
				}
			}

			.item:first-child {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-end;
				left: 0;
			}

			.item:last-child {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: flex-end;
				right: 0;
			}

			.active {
				height: 80rpx;
				width: 51%;
				font-weight: bold;

				.tit-box {
					height: 80rpx;
					line-height: 80rpx;
					background-color: rgba(#ffffff, 1);
				}
			}

			.left .tit-box {
				margin-left: 24rpx;
				margin-right: -24rpx;
				padding-right: 24rpx;
			}

			.right .tit-box {
				margin-right: 24rpx;
				margin-left: -24rpx;
				padding-left: 24rpx;
			}

			.left.active .tit-box {
				margin: 0;
			}

			.right.active .tit-box {
				margin: 0;
			}

			.left.active .tit-box:after {
				content: '';
				position: absolute;
				right: -24rpx;
				bottom: 0;
				border-top: 24rpx solid transparent;
				border-right: 24rpx solid transparent;
				border-bottom: 72rpx solid #ffffff;
			}

			.right.active .tit-box:after {
				content: '';
				position: absolute;
				left: -24rpx;
				bottom: 0;
				border-top: 24rpx solid transparent;
				border-left: 24rpx solid transparent;
				border-bottom: 72rpx solid #ffffff;
			}
		}

		.wrapper {
			display: flex;
			flex-direction: column;
			flex: 1;
		}

		.address-box {
			display: flex;
			align-items: center;

			.tag {
				font-size: 24upx;
				color: $base-color;
				margin-right: 10upx;
				background: #fffafb;
				border: 2rpx solid #ffc107;
				border-radius: 4upx;
				padding: 4upx 10upx;
				line-height: 1;
			}

			.address {
				font-size: 30upx;
				color: $font-color-dark;
			}
		}

		.u-box {
			font-size: 28upx;
			color: $font-color-light;
			margin-top: 16upx;

			.name {
				margin-right: 30upx;
			}
		}

		.head-bottom {
			overflow: hidden;
			background: #ffffff;
			border-top-left-radius: 12rpx;
			border-top-right-radius: 12rpx;
			border-bottom-left-radius: 12rpx;
			border-bottom-right-radius: 12rpx;

			.tab {
				.t-top {
					&-box {
						margin: 0;
						padding: 24rpx;

						.txt1 {
							font-size: 36rpx;
							color: #888;
						}

						.icon1 {
							margin-left: 16rpx;
							color: #bbb;
						}
					}

					&-box:active {
						background-color: #f5f5f5;
					}
				}

				.t-bb {
					margin: 0 24rpx;
					height: 1rpx;
					background-color: #e4e7ed;
				}

				.t-bottom {
					padding: 24rpx;

					.row1 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						//padding: 24rpx 0 0;
						.left {
							font-size: 28rpx;
							font-weight: bold;
						}

						.right {
							font-size: 28rpx;
							color: #ff9800;

							i {
								margin-left: 16rpx;
								color: #bbb;
							}
						}
					}

					.row2 {
						margin-top: 12rpx;
						font-size: 24rpx;
						color: #ff9800;
					}
				}
			}
		}

		.head-bottom.selectOne {
			border-top-left-radius: 0;
			border-top-right-radius: px;
		}

		.head-bottom.selectTow {
			border-top-left-radius: 12rpx;
			border-top-right-radius: 0;
		}
	}
	.topheader{
		position: absolute;
		top: 140rpx;
		width: 100%;
		height: 116rpx;
		// background-color: #000;
		// margin-top: 140rpx;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		.left{
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: rgba(89, 89, 89, 1);
			view{
				font-size: 32rpx;
				font-weight: 700;
				text{
					font-size: 40rpx;
					color: rgba(0, 0, 0, 1);
					font-weight: 900;
					margin-left: 18rpx;
				}
			}
			.predict{
				font-size: 28rpx;
				font-weight: 400;
			}
		}
		.right{
			display: flex;
			flex-direction: row;
			view{
				box-sizing: border-box;
				background: #FFFFFF;
				border: 2rpx solid #9F9F9F;
				border-radius: 14rpx;
				padding: 16rpx 30rpx;
				margin-left: 20rpx;
				font-size: 24rpx;
				font-weight: 700;
				color: rgba(85, 85, 86, 1);
			}
			view:nth-of-type(1){
				background: linear-gradient(111.77deg, #FC9A8D 56.92%, #FDDBB4 109.99%);
				border: 0;
				color: #fff;
			}
		}
	}
	.main{
		width: 100%;
		position: absolute;
		top: 290rpx;
		background-color: rgba(245, 245, 245, 0.6);
		border-radius: 28rpx 28rpx 0 0;
		padding:16rpx 24rpx 24rpx;
		// overflow: hidden;
		.common{
			width: 100%;
			background: #FFF!important;
			padding: 24rpx 16rpx;
			border-radius: 16rpx;
			box-shadow: 0px 8rpx 12rpx rgba(0, 0, 0, 0.05);
			margin-top: 24rpx;
			.titile{
				font-size: 28rpx;
				color: rgba(0, 0, 0, 1);
				font-weight: 700;
				
			}
			.box{
				color: rgba(0, 0, 0, 1);
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				
			}
		}
		.btn{
			width: 356rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			margin-top: 38rpx;
			margin-left: 158rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: #fff;
			background: linear-gradient(111.77deg, #FC9A8D 56.92%, #FDDBB4 109.99%);
			border-radius: 20rpx;
		}
	}
	.store {
		display: flex;
		flex-direction: column;
		// margin-top: 140rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0px 8rpx 12rpx rgba(0, 0, 0, 0.05);
		padding: 20rpx 16rpx;
		.name {
			padding: 8rpx 0 0rpx;
			font-size: 28rpx;
		}

		.goods-box {
			margin-top: 20rpx;
			.goods-item {
				margin-top: 40rpx;
				display: flex;
				flex-direction: row;
				// align-items: flex-end;
				.left {
					width: 128rpx;
					height: 128rpx;

					image {
						border-radius: 8rpx;
						overflow: hidden;
						width: 100%;
						height: 100%;
						background-color: #f1f1f1;
					}
				}

				.right {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					flex: 1;
					padding-left: 28rpx;

					.row1 {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-top: 6rpx;
						.tit {
							font-size: 28rpx;
							color: #333333;
							font-weight: 700;
							flex: 1;
							flex-wrap: wrap;

							.zk {
								padding: 2rpx 6rpx;
								font-size: 20rpx;
								margin-right: 16rpx;
								border-radius: 8rpx;
								background-color: #f9221d;
								color: #ffffff;
							}
						}

						.tag{
							font-size: 20rpx;
							color: 
rgba(89, 89, 89, 1);
						}

						
					}

					.row2 {
						display: flex;
						flex: row;
						align-items: flex-end;
						.old-price {
							// padding-left: 24rpx;
							font-size: 20rpx;
							color: rgba(132, 130, 130, 1);
							// font-weight: bold;
						
							.lt {
								text-decoration: line-through;
							}
						
							.fh {
								font-size: 20rpx;
							}
						}
						.price {
							font-size: 28rpx;
							padding-left: 18rpx;
							color: rgba(0, 0, 0, 1);
							// font-weight: bold;
						
							.fh {
								font-size: 20rpx;
							}
						}
					}

					.row3 {
						font-size: 20rpx;
						color: #888888;
					}
				}
			}

			.goods-item:first-child {
				margin: 0;
			}
		}

		.peisong {
			color: rgba(89, 89, 89, 1);
			.right {
				font-size: 24rpx;
				// font-weight: bold;
			}

			.left {
				font-size: 28rpx;
				// font-weight: bold;

				.fh {
					font-size: 16rpx;
				}
			}
		}

		.zhekou-box {
			.zhekou {
				display: flex;
				flex-direction: column;
				margin-top: 24rpx;

				.row1 {
					align-items: center;

					.left {
						display: flex;
						flex-direction: row;
						align-items: center;
						height: 40rpx;
						line-height: 40rpx;

						i {
							font-size: 32rpx;
							color: #ff5722;
						}

						.tit {
							font-weight: bold;
							margin-left: 12rpx;
							font-size: 28rpx;
							color: #333;
						}
					}

					.right {
						.tag1 {
							font-weight: bold;
							font-size: 28rpx;
							color: #ff5722;
						}
					}
				}

				.row2 {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #888;
				}
			}

			.zhekou:first-child {
				margin: 0;
			}
		}

		.totalbox {
			align-items: flex-end;
			
			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 26rpx;
				color: rgba(0, 0, 0, 1);

				[class*='hxicon-'] {
					color: #aaa;
					margin-left: 8rpx;
					font-size: 32rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: flex-end;

				.yh {
					color: #ff5722;

					.txt {
						color: #000;
						font-size: 30rpx;
					}

					.fh {
						font-weight: bold;
						margin-left: 6rpx;
						font-size: 16rpx;
					}

					.num {
						font-weight: 700;
						font-size: 24rpx;
					}
				}

				.total {
					margin-left: 32rpx;
					color: #333;

					.txt {
						font-size: 30rpx;
					}

					.fh {
						margin-left: 6rpx;
						font-size: 20rpx;
						font-weight: bold;
					}

					.num {
						font-weight: 700;
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.privacy {
		display: flex;
		flex-direction: column;

		.row1 {
			align-items: flex-end;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;

				.icon1 {
					color: #444;
					font-size: 48rpx;
				}

				.icon2 {
					color: #aaa;
					margin-left: 12rpx;
					font-size: 32rpx;
				}

				.txt {
					color: #333;
					margin-left: 12rpx;
					font-weight: bold;
					font-size: 28rpx;
				}
			}

			.right {}
		}

		.row2 {
			margin-top: 8rpx;
			color: #888;
			font-size: 24rpx;
		}

		.row3 {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #ff9800;
		}
	}

	.other-box {
		display: flex;
		flex-direction: column;

		.row {
			align-items: center;

			.left {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				flex: 1;
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
				flex-wrap: wrap;
				width: 60%;
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				color: #aaa;

				[class*='hxicon-'] {
					position: relative;
					top: 4rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	.body-end {
		height: 200rpx;
	}

	.foot {
		z-index: 11;
		position: fixed;
		display: flex;
		flex-direction: row;
		border-radius: 100rpx;
		overflow: hidden;
		bottom: 24rpx;
		left: 24rpx;
		right: 24rpx;
		height: 100rpx;

		.left {
			padding: 0 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #222222;
			flex: 1;

			.price {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				color: #fff;
				height: 50rpx;
				line-height: 50rpx;

				.fh {
					font-weight: bold;
					font-size: 24rpx;
				}

				.txt {
					font-size: 44rpx;
					font-weight: bold;
				}
			}

			.discount {
				margin-left: 4rpx;
				font-size: 20rpx;
				color: #bbb;
			}
		}

		.center {
			display: flex;
			align-items: center;
			background-color: #444;
			color: #ffc107;
			font-weight: bold;
			font-size: 32rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			transition: all 0.3s;
		}

		.center:active {
			background-color: #666;
		}

		.right {
			display: flex;
			align-items: center;
			color: #222;
			font-weight: bold;
			font-size: 32rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			transition: all 0.3s;
			background: linear-gradient(45deg, #ffeb3b, #ffc107);
		}

		.right:active {
			background: linear-gradient(45deg, #e0ce31, #e4ad06);
		}
			
		
	}
</style>
